
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
	href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8"
	src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!--  sortable -->
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8"
	src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#queueReport').dataTable();
	});
	$.extend($.fn.dataTable.defaults, {
        searching: false,ordering: false
    });

	function saveChanges()
 	{
		//alert("Testing Button Click event");
		
		var IdOrder = $( "#sortable" ).sortable("toArray");
		alert(IdOrder);		

		$.post( "queueEdit", {data:IdOrder}).done ( function( data ) {
			alert("Method success!");	
			});
		
		alert("The function has successfully reached the end");		
	}

	function deleteFromQueue()
 	{
		//alert("Testing Button Click event");
		
		
		alert("The delete has successfully reached the end");		
	}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Administration - Reports</title>
<link rel="stylsheet" href="css/style.css">
<script>
  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });
  </script>

</head>
<body>

	<h1>My Queue</h1>
	Movies
	<br />
	
	
<form:form method="post" modelAttribute="editQueueForm" >
	<table id="queueReport" class="display">
		<thead>
			<tr>
				<th>Movie ID</th>
				<th>Title</th>
				<th>Genre</th>
				<th>Rating</th>
				<th>Year</th>
				<th>Controls</th>
			</tr>
		</thead>
		<tbody id="sortable">
			<c:forEach items="${editQueueForm.movieList}" var="row" varStatus="vs">
				<tr id="${row.movieID}" >
					<td><form:label path="movieList[${vs.index}].movieID">${row.movieID}</form:label></td>
					<td>${row.title}</td>
					<td>${row.genre}</td>
					<td>${row.rating}</td>
					<td>${row.year}</td>
					<td><input type="submit" value="Remove" /></td>
					<form:hidden path="movieList[${vs.index}].movieID" />
				</tr>
			</c:forEach>
		</tbody>
	</table>
	<button onclick="saveChanges()">Normal Button</button><br />
	<input type="submit" value="Save Changes" /><br />
	<input type="submit" value="Ship Three Items" onclick="saveChanges()" />
</form:form>
	
</body>
</html>